<script setup>
import { NIcon } from 'naive-ui'
import { ArrowForward } from '@vicons/ionicons5'

const currentIndex = ref(1)
const swiperStyle = reactive({
  transform: 'translateX(0)',
  transition: '0.25s all'
})
// 切换轮播图
function togglePic(index) {
  const move = (index - 1) * 50
  swiperStyle.transform = `translateX(-${move}%)`
  currentIndex.value = index
}
</script>

<template>
  <div class="relative w-full">
    <div class="w-full h-800px overflow-hidden">
      <div class="w-200vw h-full flex transition-transform" :style="swiperStyle">
        <div class="banner1">
          <div class="flex w-1200px items-center">
            <div class="mr-143px">
              <div>
                <img class="w-360px h-313px" src="/public/images/home/banner/gaoxiao.png" alt="公寓, 保租房, 宿舍, 全方位宿舍管理, 高效运营" />
              </div>
              <div class="w-422px flex justify-between mt-81px">
                <NuxtLink to="https://saas.byteox.com/#/login" class="flex justify-center items-center full-btn w-210px h-64px rounded-32px text-24px">
                  <span class="text-white">免费试用</span>
                  <span class="w-36px h-36px bg-white rounded-18px ml-16px leading-42px">
                    <NIcon class="text-hex-0A87F8 text-center">
                      <ArrowForward></ArrowForward>
                    </NIcon>
                  </span>
                </NuxtLink>
                <NuxtLink class="white-btn w-180px h-64px leading-64px rounded-32px text-24px">预约演示</NuxtLink>
              </div>
            </div>
            <div class="relative w-565px h-322px select-none">
              <!-- <img class="w-full h-full" :class="{ platform: currentIndex === 1 }" src="/public/images/home/banner/computer.png" alt="工作台" />
              <img class="w-257px h-194px absolute -right-53px -top-107px z-3" :class="{ heyue: currentIndex === 1 }" src="/public/images/home/banner/heyueguanli.png" alt="合约管理" />
              <img class="w-305px h-230px absolute left-30px -top-110px z-3" :class="{ kongzhi: currentIndex === 1 }" src="/public/images/home/banner/kongzhi.png" alt="房间空置天数" />
              <img class="w-197px h-197px absolute -left-120px -top-85px z-3" :class="{ ficon: currentIndex === 1 }" src="/public/images/home/banner/f-icon.png" alt="寓盟管家" />
              <img class="w-197px h-198px absolute left-165px bottom-12px z-3" :class="{ xicon: currentIndex === 1 }" src="/public/images/home/banner/x-icon.png" alt="寓盟管家" />
              <img class="w-389px h-261px absolute -left-136px top-32px z-3" :class="{ houseimg: currentIndex === 1 }" src="/public/images/home/banner/hezhengzu.png" alt="合租、整租、集中房源" />
              <img class="w-257px h-194px absolute left-137px -bottom-72px z-3" :class="{ caiwu: currentIndex === 1 }" src="/public/images/home/banner/caiwu.png" alt="财务管理" />
              <img class="w-290px h-243px absolute left-204px top-30px z-1" :class="{ paiming: currentIndex === 1 }" src="/public/images/home/banner/cfpm.png" alt="出房排名" /> -->
            </div>
          </div>
        </div>
        <div class="banner2">
          <div class="flex w-1200px justify-center items-center">
            <div class="mr-64px">
              <div>
                <img class="w-360px h-322px select-none" src="/public/images/home/banner/liuliang.png" alt="专业带流量" />
              </div>
              <div class="w-422px h-64px flex justify-between mt-60px">
                <NuxtLink to="https://saas.byteox.com/#/login" class="flex justify-center items-center orange-btn w-210px h-64px rounded-32px text-24px">
                  <span class="text-white">免费试用</span>
                  <span class="w-36px h-36px bg-white rounded-18px ml-16px leading-42px">
                    <NIcon class="text-hex-FF7F36 text-center">
                      <ArrowForward></ArrowForward>
                    </NIcon>
                  </span>
                </NuxtLink>
                <NuxtLink class="w-180px h-64px bg-white text-center cursor-pointer leading-64px rounded-32px text-24px text-hex-FF7F36 hover:opacity-80">预约演示</NuxtLink>
              </div>
            </div>
            <div class="relative w-754px select-none h-511px">
              <img class="w-518px h-408px -right-45px select-none -top-53px absolute z-0" :class="{ yjff: currentIndex === 2 }" src="/public/images/home/banner/yjff.png" alt="一键发房" />
              <img class="w-655px h-546px -left-104px select-none -top-104px absolute z-10" :class="{ xianyu: currentIndex === 2 }" src="/public/images/home/banner/xianyu.png" alt="闲鱼租房" />
              <img class="w-574px h-469px left-17px select-none top-148px absolute z-15" :class="{ k58: currentIndex === 2 }" src="/public/images/home/banner/k58.png" alt="空置房源" />
              <img class="w-158px h-83px right-82px select-none bottom-76px absolute z-15" :class="{ xuxian: currentIndex === 2 }" src="/public/images/home/banner/xuxian.png" alt="专业带流量" />
              <img class="w-323px h-323px -right-70px select-none bottom-55px absolute z-15" :class="{ tuifang: currentIndex === 2 }" src="/public/images/home/banner/tuifang.png" alt="推房" />
            </div>
          </div>
        </div>
      </div>
    </div>
    <ul class="flex justify-center absolute bottom-20px left-0 w-full">
      <li
        v-for="index of [1, 2]"
        :key="index"
        class="w-80px h-4px mx-15px cursor-pointer"
        :style="{ background: currentIndex === index ? '#0A87F8' : 'rgba(209, 209, 209, .5)' }"
        @click="togglePic(index)"
      />
    </ul>
  </div>
</template>

<style scoped>
.banner1 {
  display: flex;
  justify-content: center;
  overflow: hidden;
  width: 100vw;
  height: 100%;
  /* background: url('/public/images/home/banner/banner1.png') no-repeat 0 0; */
  background: url('/public/images/home/banner/pic11.png') no-repeat 0 0;
  background-size: 100% auto;
  /* background-size:contain; */
}

@keyframes platform-animation {
  0% {
    opacity: 0;
    transform: scale(0);
  }

  to {
    opacity: 1;
    transform: scale(1);
  }
}

@keyframes item-animation {
  0% {
    opacity: 0;
    transform: scale(0);
  }

  100% {
    opacity: 1;
    transform: scale(1);
  }
}

.platform {
  opacity: 0;
  animation: platform-animation 0.5s ease-in 0s 1 normal forwards;
}
.paiming {
  opacity: 0;
  animation: item-animation 0.5s ease-out 0.4s 1 normal forwards;
}
.heyue {
  opacity: 0;
  animation: item-animation 0.5s ease-out 0.8s 1 normal forwards;
}

.kongzhi {
  opacity: 0;
  animation: item-animation 0.5s ease-out 1.2s 1 normal forwards;
}
.ficon {
  opacity: 0;
  animation: item-animation 0.5s ease-out 1.4s 1 normal forwards;
}
.houseimg {
  opacity: 0;
  animation: item-animation 0.5s ease-out 1.6s 1 normal forwards;
}
.caiwu {
  opacity: 0;
  animation: item-animation 0.5s ease-out 2s 1 normal forwards;
}
.xicon {
  opacity: 0;
  animation: item-animation 0.5s ease-out 2.4s 1 normal forwards;
}

.banner2 {
  display: flex;
  justify-content: center;
  overflow: hidden;
  width: 100vw;
  height: 100%;
  background: url('/public/images/home/banner/banner2.png') no-repeat 0 0;
  background-size: 100% 100%;
}
@keyframes banner2-animation {
  0% {
    opacity: 0;
    transform: scale(0);
  }

  25% {
    opacity: 0.4;
    transform: scale(0.8);
  }
  50% {
    opacity: 0.6;
    transform: scale(1);
  }
  75% {
    opacity: 0.8;
    transform: scale(1.08);
  }
  100% {
    opacity: 1;
    transform: scale(1);
  }
}

.yjff {
  opacity: 0;
  animation: banner2-animation 0.4s ease-out 0s 1 normal forwards;
}
.xianyu {
  opacity: 0;
  animation: banner2-animation 0.5s ease-out 0.4s 1 normal forwards;
}
.k58 {
  opacity: 0;
  animation: banner2-animation 0.5s ease-out 0.8s 1 normal forwards;
}
.xuxian {
  opacity: 0;
  animation: banner2-animation 0.4s ease-out 1.6s 1 normal forwards;
}
.tuifang {
  opacity: 0;
  animation: banner2-animation 0.5s ease-out 1.2s 1 normal forwards;
}
</style>
